<template>
  <div class="user-works-wrapper">
    <div class="user-works-title">
      <item-list :items="categoriesCover"
      :idx="categoryIdx"
      @changeIdx="changeCategory"
      class="category-list"></item-list>
      <search-bar class="user-works-search" v-model:searchValue="searchValue"></search-bar>
    </div>
    
    <article-list class="article-list"
    :articles="filteredArticles" @fetchArticleAbstracts="fetchArticleAbstracts"></article-list>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import SearchBar from '@c/utils/SearchBar.vue'
import ArticleList from '@/components/ArticleList.vue';
import ItemList from '@c/utils/ItemList.vue'

export default {
  components: {
    SearchBar,
    ArticleList,
    ItemList,
  },
  data() {
    return {
      categories: ['history', 'works', 'collection'],
      categoriesCover: ['浏览历史', '作品', '收藏'],
      searching: false,
      searchValue: "",
    }
  },
  computed: {
    ...mapState(['user']),
    works() {
      return this.$store.state.user.works.article
    },
    history() {
      return this.$store.state.user.history.article
    },
    collection() {
      return this.$store.state.user.collection.article
    },
    categoryIdx() {
      return this.categories.includes(this.$route.query.q)
        ? this.categories.indexOf(this.$route.query.q)
        : 0;
    },
    articles() {
      if(this.categoryIdx === 0) {
        return this.history;
      } else if(this.categoryIdx === 1) {
        return this.works;
      } else {
        return this.collection;
      }
    },
    filteredArticles() {
      return this.articles.filter(article => {
        if(typeof article.title !== 'string') return true;
        return article.title.includes(this.searchValue) || article.digest.includes(this.searchValue);
      })
    }
  },
  watch: {
    categoryIdx() {
      this.fetchArticleAbstracts();
    }
  },
  methods: {
    changeCategory(idx) {
      this.$router.push({
        path: this.$route.path,
        query: {
          q: this.categories[idx]
        }
      })
    },
    fetchArticleAbstracts() {
      switch(this.categoryIdx) {
        case 0: this.$store.commit('fetchHistoryArticleAbstracts'); break;
        case 1: this.$store.commit('fetchWorksArticleAbstracts'); break;
        case 2: this.$store.commit('fetchCollectionArticleAbstracts'); break;
      }
    }
  },
}
</script>

<style scoped lang="less">
@w: var(--innerWidthPart1);
@th: calc(var(--innerWidthPart1) * 0.065);

.user-works-wrapper {
  width: @w;

  .user-works-title {
    position: relative;
    box-sizing: border-box;
    width: @w;
    height: @th;
    padding: 0 calc(@w / 50);
    border-bottom: 1px solid var(--gray);

    .category-list {
      float: left;
      --itemListWidth: calc(@w * 0.6);
      --itemListHeight: calc(@th);
    }

    .user-works-search {
      float: right;
      --searchBarWidth: calc(@w * 0.2);
      --searchBarHeight: @th;
      --searchBarFontSize: calc(@th / 4);
      --searchBarInnerHeight: calc(@th * 0.6);
      --backgroundColor: white;

      &:focus-within {
        --searchBarWidth: calc(@w * 0.35);
      }
    }
  }

  .article-list {
    --articleListWidth: @w;
  }
}
</style>